<template>
  <div class="dashboard">
    <div class="top">
      <div class="top-left">
        <div class="top-left-top">
          <div style="display: grid; grid-template-rows: 1fr auto; height: 100%; padding-bottom: 20px;">
            <div>
              <div id="board_Information" style="width: 100%;height: 100%;"></div>
            </div>
            <div>
              <div style="font-size: 18px; font-weight: bold;">Order Number:{{ woData.id }}</div>
              <div style="font-size: 18px;font-weight: bold;">Planned Output:{{ woData.qty }}</div>
            </div>
          </div>
        </div>
        <div class="top-left-bottom">
          <div id="board_oee"></div>
        </div>
      </div>
      <div class="top-middle">
        <div class="top-middle-top">
          <h1>Jupiter {{ line }} Line Shift Board</h1>
        </div>
        <div class="top-middle-middle">
          <div id="board_LJCL"></div>
        </div>
        <div class="top-middle-bottom">
          <div id="board_dashboard"></div>
        </div>
      </div>
      <div class="top-right">
        <div class="top-right-top">
          <div style="display: grid; grid-template-columns: 1fr 200px; height: 100%; padding: 10px;">
            <div class="table">
              <a-table
                style="--jecc-height: 55vh;--jecc-height-p: 0.45;"
                ref="table"
                size="middle"
                :pagination="false"
                :columns="PTColumns"
                :dataSource="broadResult.unqualifiedCause">
                <template slot="color" slot-scope="text, record, index">
                  <div :style="`height: 20px; width: 50px; background: ${colorEnums.get(index)};border-radius: 3px;`"></div>
                </template>
              </a-table>
            </div>
            <div class="canvas" style="height: 100%; width: 100%;">
              <div id="board_abnormalTop"></div>
            </div>
          </div>
        </div>
        <div class="top-right-bottom">
          <div id="board_pass_rate"></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="bottom-left-top">
          <div class="bottom-left-top-left">
            <div id="board_hour_output"></div>
          </div>
          <div class="bottom-left-top-right">
            <div id="board_running_state"></div>
          </div>
        </div>
        <div class="bottom-left-bottom">
          <div style="display: grid; grid-template-rows: 1fr 30px; height: 100%; padding: 10px;">
            <div class="cards">
              <div class="block" v-for="(item,index) in logs" :key="index" :style="`--background: ${suatusEnums.get(item.status).color};`">
                <div>
                  <div>{{ item.name }}</div>
                  <div>{{ suatusEnums.get(item.status).statusTxt }}</div>
                  <div>{{ suatusEnums.get(item.status).es }}</div>
                </div>
              </div>
            </div>
            <div class="dots">
              <div class="dot" :style="`--bg:${item.color}`" v-for="(item,index) in [...suatusEnums.values()]" :key="index">{{ item.text }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-right">
        <div class="bottom-right-top">
          <div style="display: grid; grid-template-columns: 200px 1fr ; height: 100%; padding: 10px;">
            <div class="canvas" style="height: 100%; width: 100%;">
              <div id="board_dtTop"></div>
            </div>
            <div class="table">
              <a-table
                style="--jecc-height: 45vh;--jecc-height-p: 0.5;"
                ref="table"
                size="middle"
                :pagination="false"
                :columns="DTColumns"
                :dataSource="broadResult.alarmNum">
                <template slot="color" slot-scope="text, record, index">
                  <div :style="`height: 20px; width: 50px; background: ${colorEnums.get(index)};border-radius: 3px;`"></div>
                </template>
              </a-table>
            </div>
          </div>
        </div>
        <div class="bottom-right-bottom">
          <div style="display: grid; grid-template-columns: 200px 1fr ; height: 100%; padding: 10px;">
            <div class="canvas" style="height: 100%; width: 100%;">
              <div id="board_dtFreTop"></div>
            </div>
            <div class="table">
              <a-table
                style="--jecc-height: 45vh;--jecc-height-p: 0.5;"
                ref="table"
                size="middle"
                :pagination="false"
                :columns="DTAColumns"
                :dataSource="broadResult.alarmDuration">
                <template slot="color" slot-scope="text, record, index">
                  <div :style="`height: 20px; width: 50px; background: ${colorEnums.get(index)};border-radius: 3px;`"></div>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { dateFormat } from '@/utils/date'
import { getAction, httpAction } from '@api/manage'
import router from '../../router'

const echarts = require('echarts')
export default {
  name: 'LineBoard',
  data() {
    return {
      suatusEnums: new Map([
        [0, {color: 'rgb(0,166,90)', statusTxt: '连接成功',es: 'Initialization', text: '空闲'}],
        [1, {color: 'rgb(245,105,84)', statusTxt: '故障中',es: 'Broken', text: '故障'}],
        [2, {color: 'rgb(0,166,90)', statusTxt: '生产中',es: 'Running', text: '生产'}],
        [4, {color: 'rgb(243,156,18)', statusTxt: '待料空闲',es: 'Waiting', text: '生产'}],
        [8, {color: 'rgb(243,156,18)', statusTxt: '手动空闲',es: 'Init', text: '空闲'}],
        [16, {color: 'rgb(243,156,18)', statusTxt: '待料空闲',es: 'Waiting', text: '停机'}],
        [99, {color: 'rgb(178,174,174)', statusTxt: '断联MES',es: 'Switch Off MES', text: '断联'}],
      ]),
      colorEnums: new Map([
        [0, '#fc8251'],
        [1, '#5470c6'],
        [2, '#9A60B4'],
        [3, '#ef6567'],
        [4, '#f9c956'],
        [5, '#3BA272'],
      ]),
      line: this.$route.query.line,
      url: {
        lineStatus: '/monitor/api/runCmd',
        getBoardData: '/board/lineBoard/getLineBoardProductionData'
      },
      woData:{},
      woQty:0,
      classPlanTotalNum:[],
      classAlarmTotalNum:[],
      classTimeList:[],
      oee:0,
      availability:0,
      performance:0,
      ftq:0,
      param:{},
      broadResult:{
        OP10: [],
        OP20: [],
        OP30: [],
        OP40: [],
        OP50: [],
        OP60: [],
        OP70: [],
        OP80: [],
      },
      fixedColumns: [
        {
          width: '20%',
          align: 'left',
          dataIndex: 'time'
        },
        {
          width: '80%',
          align: 'left',
          dataIndex: 'msg'
        }
      ],
      logs: [],
      informationChart: {},
      informationOption: {},
      abnormalTopChart:{},
      timer: null
    }
  },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.screenAdatper)

    this.initChart()
    this.currentTime();
  },
  destroyed () {
    // 销毁定时器
    clearTimeout(this.timer)
  },
  computed: {
    PTColumns() {
      return [{
        title: 'Color',
        dataIndex: 'color',
        scopedSlots: { customRender: 'color' },
        width: 60
      },{
        title: 'Description',
        align: 'left',
        dataIndex: 'name',
        ellipsis: true
      },{
        title: 'Quantity',
        align: 'center',
        dataIndex: 'value',
        width: 80
      },{
        title: 'Percentage',
        align: 'center',
        dataIndex: 'percent',
        customRender: function(text) {
            return text+'%'
        },
        width: 100
      }]
    },
    DTColumns() {
      return [{
        title: 'Color',
        dataIndex: 'color',
        scopedSlots: { customRender: 'color' },
        width: 60
      },{
        title: 'Description',
        align: 'left',
        dataIndex: 'name',
        ellipsis: true
      },{
        title: 'Times',
        align: 'center',
        dataIndex: 'value',
        width: 80
      },{
        title: 'Percentage',
        align: 'center',
        dataIndex: 'percent',
        customRender: function(text) {
          return text+'%'
        },
        width: 100
      }]
    },
    DTAColumns() {
      return [{
        title: 'Color',
        dataIndex: 'color',
        scopedSlots: { customRender: 'color' },
        width: 60
      },{
        title: 'Description',
        align: 'left',
        dataIndex: 'name',
        ellipsis: true
      },{
        title: 'Time(S)',
        align: 'center',
        dataIndex: 'value',
        width: 80
      },{
        title: 'Percentage',
        align: 'center',
        dataIndex: 'percent',
        customRender: function(text) {
          return text+'%'
        },
        width: 100
      }]
    },
  },
  methods: {
    initChart() {
      this.informationChart = echarts.init(document.getElementById('board_Information'))
      this.oeeChart = echarts.init(document.getElementById('board_oee'))
      this.lJCLChart = echarts.init(document.getElementById('board_LJCL'))
      this.dashboardChart = echarts.init(document.getElementById('board_dashboard'))
      this.abnormalTopChart = echarts.init(document.getElementById('board_abnormalTop'))
      this.passRateChart = echarts.init(document.getElementById('board_pass_rate'))
      this.hourOutputChart = echarts.init(document.getElementById('board_hour_output'))
      this.runningStateChart = echarts.init(document.getElementById('board_running_state'))
      this.dtTopChart = echarts.init(document.getElementById('board_dtTop'))
      this.dtFreTopChart = echarts.init(document.getElementById('board_dtFreTop'))
      this.initBarChart()
    },
    initBarChart() {
      let that = this
      let option = {
        title: {
          text: 'Order Information',
          left: 'left'
        },
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false
            },
            center: ['50%', '50%'],
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: '#464646'
              }
            },
            axisLine: {
              lineStyle: {
                width: 20
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 50
            },
            data: [
              {
                value: this.schedule,
                name: 'Total',
                itemStyle: {color: '#96a8b1'},
                title: {
                  text: 'Main Title',
                  offsetCenter: ['0%', '30%']
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ['0%', '10%']
                }
              }
            ],
            title: {
              fontSize: 14
            },
            detail: {
              //show:false,
              width: 50,
              height: 14,
              fontSize: 20,
              color: 'inherit',
              formatter: this.woQty+' PCS'
            }
          }
        ]
      }
      let oeeOption = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '75%'],
            radius: '130%',
            min: 0,
            max: 100,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.5, '#FF6E76'],
                  [0.80, '#FDDD60'],
                  [1, 'rgb(0,166,90)']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '45',
              width: 20,
              offsetCenter: [0, '-35%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 3
              }
            },
            axisLabel: {
              color: '#464646',
              fontSize: 10,
              distance: -60,
              show: false,
              rotate: 'tangential'
            },
            title: {
              offsetCenter: [0, '10%'],
              fontSize: 20
            },

            detail: {
              fontSize: 22,
              offsetCenter: [0, '-7%'],
              valueAnimation: true,
              formatter: function(value) {
                return value + '%'
              },
              color: 'inherit'
            },
            data: [
              {
                value: this.oee,
                name: 'OEE'
              }
            ]
          }
        ]
      }
      let lJCLOption = {
        title: {
          text: 'Accumulated hourly production',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['Precipitation', 'Temperature']
        },
        grid: {
          show: false,
          top: '15%',
          right: '5%',
          bottom: '10%',
          left: '10%'
        },
        xAxis: [
          {
            type: 'category',
            data: this.classTimeList,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            interval: 200,
            axisLabel: {
              formatter: '{value}pcs'
            }
          }
        ],
        series: [
          {
            name: '实际产量',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' pcs'
              }
            },
            label: {
              show: true,
              formatter: function(param) {
                return param.value
              },
              position: 'top',
              textStyle: {
                color: 'inherit',
                fontWeight: 'bold',
                fontSize: 15
              }
            },
            data: this.classAlarmTotalNum
          },
          {
            name: '计划产量',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' pcs'
              }
            },
            lineStyle: {
              width: 3
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' }
              ]
            },
            data: this.classPlanTotalNum
          }
        ]
      }
      let dashboardOption = {
        series: [
          {
            type: 'gauge',
            radius: '80%',
            center: ['15%', '50%'],
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.3, '#FF6E76'],
                  [0.7, '#FDDD60'],
                  [1, 'rgb(0,166,90)']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 25,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              fontSize: 18,
              formatter: '{value}%',
              color: 'inherit'
            },
            title: {
              show: true,
              offsetCenter: ['0%', '80%']
            },
            data: [
              {
                value: this.availability,
                name: 'Availability'
              }
            ]
          },
          {
            type: 'gauge',
            radius: '80%',
            center: ['50%', '50%'],
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.3, '#FF6E76'],
                  [0.7, '#FDDD60'],
                  [1, 'rgb(0,166,90)']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 25,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              fontSize: 18,
              formatter: '{value}%',
              color: 'inherit'
            },
            title: {
              show: true,
              offsetCenter: ['0%', '80%']
            },
            data: [
              {
                value: this.performance,
                name: 'Performance'
              }
            ]
          },
          {
            type: 'gauge',
            radius: '80%',
            center: ['85%', '50%'],
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.3, '#FF6E76'],
                  [0.7, '#FDDD60'],
                  [1, 'rgb(0,166,90)']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 25,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              fontSize: 18,
              formatter: '{value}%',
              color: 'inherit'
            },
            title: {
              show: true,
              offsetCenter: ['0%', '80%']
            },
            data: [
              {
                value: this.ftq,
                name: 'FTQ'
              }
            ]
          }
        ]
      }
      let abnormalTopOption = {
        title: {
          text: 'Suspicious Part TOP5',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   textStyle: {
        //     fontStyle: "normal",
        //     fontWeight: "bold",
        //     fontSize: 24
        //   },
        //   orient: 'vertical',
        //   top: '20%',
        //   left: '10%'
        // },
        color: [...this.colorEnums.values()],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '80%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.broadResult.unqualifiedCause
          }
        ]
      };

      let passRateOption = {
        title: {
          text: 'Hourly OK Rate By ST.'
        },

        legend: {
          bottom: "2%",
          data: this.broadResult.lineOPList
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.classTimeList
        },
        yAxis: {
          min: Math.floor((Math.min.apply(null,[...this.broadResult.OP10, ...this.broadResult.OP20, ...this.broadResult.OP30, ...this.broadResult.OP40, ...this.broadResult.OP50, ...this.broadResult.OP60, ...this.broadResult.OP70, ...this.broadResult.OP80]) - 1)/10) * 10,
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: 'OP10',
            type: 'line',
            smooth: true,
            data: this.broadResult.OP10
          },
          {
            name: 'OP20',
            type: 'line',
            smooth: true,
            data: this.broadResult.OP20
          },
          {
            name: 'OP30',
            type: 'line',
            smooth: true,
            data: this.broadResult.OP30
          },
          {
            name: 'OP40',
            type: 'line',
            smooth: true,
            data: this.broadResult.OP40
          },
          {
            name: 'OP50',
            type: 'line',
            smooth: true,
            data: this.broadResult.OP50
          },
          {
            name: 'OP60',
            type: 'line',
            smooth: true,
            data: this.broadResult.OP60
          },
          {
            name: 'OP70',
            type: 'line',
            smooth: true,
            data: this.broadResult.OP70
          },
          {
            name: 'OP80',
            type: 'line',
            smooth: true,
            data: this.broadResult.OP80
          },
        ]
      };
      let hourOutputOption = {
        title: {
          text: 'Hourly Output',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['Precipitation', 'Temperature']
        },
        grid: {
          show: false,
          top: '15%',
          right: '5%',
          bottom: '10%',
          left: '10%'
        },
        xAxis: [
          {
            type: 'category',
            data: this.classTimeList,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 200,
            interval: 50,
            axisLabel: {
              formatter: '{value}pcs'
            }
          }
        ],
        series: [
          {
            name: '实际产量',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' pcs'
              }
            },
            label: {
              show: true,
              formatter: function(param) {
                if (param.value>0){
                  return param.value
                }else{
                  return '';
                }

              },
              position: 'top',
              textStyle: {
                color: 'inherit',
                fontWeight: 'bold',
                fontSize: 15
              }
            },
            data: this.actualNum
          },
          {
            name: '计划产量',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' pcs'
              }
            },
            data: this.broadResult.planNum
          }
        ]
      }
      let runningStateOption = {

        title: {
          text: 'Device status',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: '14%',
          containLabel: true,
          tooltip: {
            trigger: 'axis'
          },
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: this.broadResult.lineOPList,
          splitNumber: 8,
        },
        series: [
          {
            name: 'Working Time',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: 'rgb(0,166,90)'
            },
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              formatter: (params) => {
                let b =(Number(params.data) / (Number(params.data) + Number(this.broadResult.lineOPStopList[params.dataIndex])) * 100).toFixed(2)
                if (b>=20){
                  return `${params.data}m(${b}%)`
                }else if(b>10 && b<20){
                  return `${b}%`
                }else{
                  return '';
                }
              },
              color: '#fff'
            },
            data: this.broadResult.lineOPRunList
          },
          {
            name: 'Down Time',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#fc8251'
            },
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              formatter: (params) => {
                let b =(Number(params.data) / (Number(params.data) + Number(this.broadResult.lineOPRunList[params.dataIndex])) * 100).toFixed(2)
                if (b>=20){
                  return `${params.data}m(${b}%)`
                }else if(b>10 && b<20){
                  return `${b}%`
                }else{
                  return '';
                }
              },
              color: '#fff'
            },
            data: this.broadResult.lineOPStopList
          }
        ]
      };
      let dtTopOption = {
        title: {
          text: 'DT(Frequency) TOP',
          left: 'left'
        },
        color: [...this.colorEnums.values()],
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            center: ['40%', '50%'],
            label: {
              show: false
            },
            data: this.broadResult.alarmNum
          }
        ]
      };
      let dtFreTopOption = {
        title: {
          text: 'DT TOP ',
          left: 'left'
        },
        color: [...this.colorEnums.values()],
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            center: ['40%', '50%'],
            label: {
              show: false
            },
            data: this.broadResult.alarmDuration
          }
        ]
      };
      this.informationOption = option
      this.informationOption && this.informationChart.setOption(option)
      this.oeeOption = oeeOption
      this.oeeOption && this.oeeChart.setOption(oeeOption)
      this.lJCLOption = lJCLOption
      this.lJCLOption && this.lJCLChart.setOption(lJCLOption)
      this.dashboardOption = dashboardOption
      this.dashboardOption && this.dashboardChart.setOption(dashboardOption)
      this.abnormalTopOption = abnormalTopOption
      this.abnormalTopOption && this.abnormalTopChart.setOption(abnormalTopOption)
      this.passRateOption = passRateOption
      this.passRateOption && this.passRateChart.setOption(passRateOption)
      this.hourOutputOption = hourOutputOption
      this.hourOutputOption && this.hourOutputChart.setOption(hourOutputOption)
      this.runningStateOption = runningStateOption
      this.runningStateOption && this.runningStateChart.setOption(runningStateOption)
      this.dtTopOption = dtTopOption
      this.dtTopOption && this.dtTopChart.setOption(dtTopOption)
      this.dtFreTopOption = dtFreTopOption
      this.dtFreTopOption && this.dtFreTopChart.setOption(dtFreTopOption)
    },
    screenAdatper() {
      this.informationChart.resize()
      this.oeeChart.resize()
      this.lJCLChart.resize()
      this.dashboardChart.resize()
      this.abnormalTopChart.resize()
      this.passRateChart.resize()
      this.hourOutputChart.resize()
      this.runningStateChart.resize()
      this.dtTopChart.resize()
      this.dtFreTopChart.resize()
    },
    tableRowClass(record, index) {
      return 'log-' + record.level
    },
    getLineBoardData() {
      let that = this
      this.param.line = this.line
      getAction(this.url.getBoardData, this.param).then((res) => {
        this.woQty = res.result.woIdNum
        this.broadResult = res.result
        let classAlarmTotalNum = []
        let  actualNum = []
        for(let i = 0; i < res.result.classAlarmTotalNum.length; i++) {
          if (res.result.classAlarmTotalNum[i]<res.result.classPlanTotalNum[i]){
            classAlarmTotalNum[i] ={
              value: res.result.classAlarmTotalNum[i],
              itemStyle: {
                color: '#a90000'
              }
            }
          }else{
            classAlarmTotalNum[i] =res.result.classAlarmTotalNum[i]
          }
        }
        for(let j = 0; j < res.result.actualNum.length; j++) {
          if (res.result.actualNum[j]<res.result.planNum[j]){
            actualNum[j] ={
              value: res.result.actualNum[j],
              itemStyle: {
                color: '#a90000'
              }
            }
          }else{
            actualNum[j] =res.result.actualNum[j]
          }
        }
        this.classPlanTotalNum =  res.result.classPlanTotalNum
        this.classAlarmTotalNum = classAlarmTotalNum
        this.actualNum = actualNum
        this.classTimeList =  res.result.classTimeList
        this.availability =  res.result.availability
        this.performance =  res.result.performance
        this.ftq =  res.result.ftq
        this.oee =  res.result.oee
        this.schedule = (this.woQty/this.woData.qty*100).toFixed(2)
        this.initBarChart();
      }).finally(() => {
      })
    },
    getLineStatus() {
      let lineStatus = {
        serviceid: 'mes',
        cmd: 'lineStatus',
        entityid: this.line,
        clientid: this.line + ';;',
        shift:0,
        stn:0,
        wo: 0
      }
      httpAction(this.url.lineStatus, lineStatus, 'post').then((res) => {
        if (res.success) {
          let wo = JSON.parse(res.result.data.wo)
          this.logs = JSON.parse(res.result.data.stn)
          console.log('工站状态')
          console.log(this.logs)
          this.woData = wo[0]
        } else {
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    currentTime() {
      this.getLineStatus()
      this.getLineBoardData()
      this.timer = setTimeout(() => {
        this.currentTime()
      }, 20000)
    }
  }
}
</script>
<style scoped lang="less">

html, .dashboard {
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  font-family: '微软雅黑' !important;
}

.cards {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-row: 1;
  overflow: auto;
  grid-gap: 10px;
  .block {
    background: var(--background);
    border-radius: 5px;
    color: #fff;
    justify-content: center;
    display: flex;
    align-items: center;
    height: calc(100);
  }
}

.dots {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 10px;
  .dot {
    padding-left: 20px;
    position: relative;
    &::after {
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      background: var(--bg);
      border-radius: 50%;
      position: absolute;
      left: 4px;
      top: 4px;

    }
  }
}

.dashboard {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}

.top {
  width: 100%;
  height: 55vh;
  display: flex;
}

.top-left {
  width: 20%;
  height: 100%;
}

.top-left-top {
  width: 100%;
  height: 60%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

.top-left-bottom {
  width: 100%;
  height: 40%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

.top-middle {
  width: 40%;
  height: 100%;
}

.top-middle-top {
  width: 100%;
  height: 10%;
}

.top-middle-top h1 {
  font-size: xx-large;
  font-weight: 600;
  color: #347594;
}

.top-middle-middle {
  width: 100%;
  height: 50%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

.top-middle-bottom {
  width: 100%;
  height: 40%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

.top-right {
  width: 40%;
  height: 100%;
}

.top-right-top {
  width: 100%;
  height: 45%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}
.a-tab {
  width: 40vh;
  height: calc(100vh - 75vh);
  overflow: auto  scroll;
  td, th {
    white-space: nowrap;
  }
  /** 列自适应，弊端会导致列宽失效 */
  &.ant-table-wrapper .ant-table-content {
    overflow-x: auto;
  }
}


/deep/ .ant-table-thead>tr>th {
  background: rgb(103, 161, 241);
  color: rgb(0, 0, 0);
  border-bottom: 1px solid rgb(103, 161, 241);
}

/deep/ .ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td {
  padding: 0px 10px;
  height: calc((var(--jecc-height)  * var(--jecc-height-p) - 20px - 46px) / 5);
  color: rgb(0, 0, 0);
  border-bottom: 1px solid rgb(103, 161, 241)
}

.top-right-bottom {
  width: 100%;
  height: 55%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

.bottom {
  width: 100%;
  height: 45vh;
  display: flex;
}

.bottom-left {
  width: 60%;
  height: 100%;
}

.bottom-left-top {
  width: 100%;
  height: 50%;
  display: flex;
}

.bottom-left-top-left {
  width: 60%;
  height: 100%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

.bottom-left-top-right {
  width: 60%;
  height: 100%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

.bottom-left-bottom {
  width: 100%;
  height: 50%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

.bottom-right {
  width: 40%;
  height: 100%;
}

.bottom-right-top {
  width: 100%;
  height: 50%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

.bottom-right-bottom {
  width: 100%;
  height: 50%;
  border: 2px solid #b2aeae;
  border-radius: 10px;
}

#board_Information {
  width: 100%;
  height: 70%;
}

#board_oee {
  width: 100%;
  height: 100%;
}

#board_LJCL {
  width: 100%;
  height: 100%;
}

#board_dashboard {
  width: 100%;
  height: 100%;
}

#board_abnormalTop {
  width: 100%;
  height: 100%;
}
#board_pass_rate{
  width: 100%;
  height: 100%;
}
#board_hour_output{
  width: 100%;
  height: 100%;
}
#board_running_state{
  width: 100%;
  height: 100%;
}
#board_dtTop{
  width: 100%;
  height: 100%;
}
#board_dtFreTop{
  width: 100%;
  height: 100%;
}
/deep/ .ant-table-tbody .log-1 {
  background: #f39c12;
  color: #fff;
}

/deep/ .ant-table-tbody .log-2 {
  background: #f56954;
  color: #fff;
}

/deep/ .ant-table-tbody .log-3 {
  background: #00a65a;
  color: #fff;
}
</style>

